<template>
	<view class="deviceNotList">
		<!-- 设备未还还列表 -->
		<navBar title="设备归还" goBackUrl="/pages/eventArchiving/eventArchivingList"  @goBack="goBack"></navBar>
		
		<view class="bgc"></view>
		
		<scroll-view scroll-y="true" class="scroll-box">
			<view class="content">
				<checkbox-group @change="deviceChange">
					<view class="list" v-for="(item,index) in list" :key="item.name">
						<view class="title">
							<view class="name">{{ item.name}}</view>
							<view class="value">{{ item.num }}</view>
						</view>
						<label class="label" v-for="(value,idx2) in item.children" :key="idx2">
							<view class="coll">
								<view class="coll-item">
									<view class="name">规格型号： </view>
									<view class="value">{{ value.specificationModel || "" }}</view>
								</view>
								<view class="coll-item">
									<view class="name">设备编号： </view>
									<view class="value">{{ value.code || "" }}</view>
								</view>
								<view class="coll-item">
									<view class="name">所属基地： </view>
									<view class="value">{{ value.stationName || "" }}</view>
								</view>
								<checkbox :value="value.deviceId" :checked="value.checked" class="checkbox color round"></checkbox>
							</view>
						</label>
					</view>
				</checkbox-group>
				
				<view class="all">
					<checkbox-group @change="checkboxChangeAll" class="radio">
						<label class="label" >
							<checkbox :value="allCheck.value" :checked="allCheck.isChecked"  class="color round"/>
							<text class="text">{{allCheck.name}}</text>
						</label>
					</checkbox-group>
					
					<view class="number">
						<view class="name">归还小计：</view>
						<view class="num active">{{ returnNum }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button @click="submit" :loading="loading"  class="button-primary">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getEquipmentListCode, getEqReturnWarehouseSaveEx, getEqReturnWarehouseExCode} from "@/api/device/deviceOut.js"
	export default{
		name: "deviceNotList",
		data() {
			return {
				loading: false,
				list: [],
				allCheck : {
					name : '全选',
					value : 'all',
					isChecked : false,	
				},
				data: {},
				returnNum: 0,  // 小计
			}
		},
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('setData', (data) => {
				console.log("setDatasetDatasetData", data.data)
				this.data = data.data
				this.getReturnList(this.data.eqExWarehouseCode)
			})
		},
		methods: {
			async getReturnList(code){
				let res = await getEquipmentListCode({code:code})
				let list = res.result
				let res2 = await getEqReturnWarehouseExCode({exCode: code})
				let list2 = res2.result.map(item=>item.deviceId)
				
				let tempList = list.filter(item=>{
					return !list2.find(value=> item.deviceId === value)
				})
				tempList.forEach(item=> {
					item.checked = true
				})
				this.allCheck.isChecked = true
				this.returnNum = tempList.length
				
				this.list = this.arrayFilter(tempList, "name")
				console.log(list, this.list);
			},
			
			// 单选
			deviceChange(e){
				let checkList = e.detail.value
				let newList = []
				let index = 0
				if(checkList.length !== 0){
					this.list.forEach(item=>{
						item.children.forEach(value=>{
							if(checkList.includes(value.deviceId)){
								this.$set(value, "checked", true)
							}else{
								this.$set(value, "checked", false)
							}
							newList.push(value)
						})
					})
				}
				
				newList.forEach(item=>{
					if(item.checked){
						index ++
					}
				})
				this.returnNum = index
				if(index !== 0 && newList.length !== 0 && index === newList.length){
					this.allCheck.isChecked = true
				}else{
					this.allCheck.isChecked = false
				}
			},
			
			// 全选
			checkboxChangeAll(e){
				if(e.detail.value.length !== 0){
					let newList = []
					this.list.forEach(item=>{
						item.children.forEach(value=>{
							this.$set(value, "checked", true)
							newList.push(item)
						})
					})
					this.allCheck.isChecked = true
					this.returnNum = newList.length
				}else{
					this.list.forEach(item=>{
						item.children.forEach(value=>{
							this.$set(value, "checked", false)
						})
					})
					this.allCheck.isChecked = false
					this.returnNum = 0
				}
			},
			
			// 提交
			submit(){
				if(this.loading) return
				this.loading = true
				
				let list = []
				this.list.forEach(item=>{
					item.children.forEach(value=>{
						if(value.checked){
							list.push(value)
						}
					})
				})
				
				let ids = []
				let eqNames = []
				list.forEach(item=>{
					ids.push(item.deviceId)
					eqNames.push(item.name)
				})
				let projectCascade =  this.data.projectCascade
				eqNames = Array.from(new Set(eqNames))
				let _data = {
					exCode: this.data.eqExWarehouseCode,
					deviceIds: ids,
					projectCascade: projectCascade,
					eqNames: eqNames.join(",")
				}
				 if(this.returnNum > 0){
					 console.log(_data);
					getEqReturnWarehouseSaveEx(_data).then(res=>{
						this.loading = false
						if(res.success){
							
							// 调用上个页面的方法
							let pages = getCurrentPages();
							let beforePage = pages[pages.length - 2];//上个页面
							// #ifdef H5
							beforePage.getList()
							// #endif
							// #ifndef H5
							beforePage.$vm.getList()
							// #endif
							
							uni.showToast({
								title: '保存成功',
								icon: "success"
							})
							
							uni.navigateBack({
								url: "/subpackage-emergency/pages/eventArchiving/eventArchivingList"
							})
						}
					})
				}else{
					this.loading = false
					uni.showToast({
						title: '请选择归还的设备',
						icon: "none"
					})
				}
			},
			
			goBack(url){
				uni.navigateBack({
					url: url
				})
			},
			
			/**
			* @description:  list 数组根据 stationName分组 num统计数量
			* @param {type}  list: 需要处理的数组  (原数组)
			* @param {type}  stationName: 用于判断相同的键名 
			* @return:       返回值: 数组
			*/
			arrayFilter(list, stationName){
				let obj = {}
				let newList = []
				for (let i = 0; i < list.length; i++) {
					let item = list[i]
					let str = item[stationName]
					if(obj[str]){
						obj[str].push(item)
					}else{
						obj[str]=[]
						obj[str].push(item)
					}
				}
				// 对象转数组
				for (let key in obj) {
					let value = obj[key]
					let newkey = {name: key, num:value.length, children: value}
					newList.push(newkey)
				}
				return newList
			}
		}
	}
</script>

<style lang="scss" scoped>
	.deviceNotList{
		/* #ifdef MP-WEIXIN */
			margin-top: 200rpx;
		/* #endif */
		width: 100%;
		height: 100%;
		.bgc{
			width: 100%;
			height: 30rpx;
			background-color: #F5F7FA;
		}
		.scroll-box{
			height: calc(100vh - 180rpx);
			padding-top: 10rpx;
		}
		
		.content{
			height: calc(100vh - 280rpx);
			background-color: #F5F7FA;
		}
		.list{
			padding: 0rpx 45rpx;
			background-color: #fff;
			.title{
				display: flex;
				line-height: 120rpx;
				height: 120rpx;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: 600;
				color: #445469;
				border-bottom: 2rpx solid #E2E5ED;
				.value{
					margin-right: 25rpx;
					
				}
			}
			.coll{
				position: relative;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #E2E5ED;
				.coll-item{
					padding: 0rpx 20rpx;
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					
					.name{
						/* #ifdef MP-WEIXIN */
							flex: none;
						/* #endif */
						margin-left: 25rpx;
					}
					.value {
						max-width: 360rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					
				}
				.checkbox{
					position: absolute;
					top: 10rpx;
					right: 20rpx;
				}
			}
		}
		
		.all{
			padding: 0rpx 45rpx;
			padding: 45rpx;
			padding-bottom: 50rpx;
			display: flex;
			justify-content: space-between;
			background-color: #F5F7FA;
			.label{
				display: flex;
				align-items: center;
				.text{
					font-size: 32rpx;
					font-weight: bold;
					color: #445469;
				}
			}
			.number{
				display: flex;
				.active{
					color: #FF6A6A;
				}
			}
		}
	}
</style>
<style>
	page{
		height: 100%;
		width: 100%;
	}
	body{
		width: 100%;
		height: 100%;
	}
</style>